<template>
  <AppHeader :title="title" :banAnimate="true">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="book-details">
    <div class="content">
      <van-cell @click="cellClick(i)" is-link v-for="i in  state.dataForm.sr" :key="i.id" class="cell-list">
        <template #title>
         <span class="ellipsis-multiline2 custom-title">
          {{i.resourceName}}
         </span>
        </template>
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #icon>
          <img v-if="i===1"
          src="@/assets/images/unit-icon.png"
          width="20"
          height="20"
          class="img"
        />
        <img v-else-if="i===2"
          src="@/assets/images/lesson-icon.png"
          width="20"
          height="20"
          class="img"
        />
        <img v-else-if="i===3"
          src="@/assets/images/record.png"
          width="20"
          height="20"
          class="img"
        />
        <img v-else-if="i===4"
          src="@/assets/images/video-purple.png"
          width="20"
          height="20"
          class="img"
        />
        <img v-else
          src="@/assets/images/video-purple.png"
          width="20"
          height="20"
          class="img"
        />
        </template>
        <template #label>
          <!-- <div class="tag-blue" v-if="i===1">发音要领</div>
          <div class="tag-yellow" v-else-if="i===2">实战演练</div>
          <div class="tag-blue" v-else-if="i===3">例词跟读</div>
          <div class="tag-green" v-else-if="i===4">报听写</div> -->
          <div class="tag-blue" >{{i.moduleName}}</div>
        </template>
      </van-cell>
    </div>
    <div class="tk-select" v-show="isshowTk" @click="hiddenTk">
      <div class="select-box">
        <div class="select-option circle-yellow" @click="clickArticle(1)">跟读</div>
        <div class="select-option circle-green" @click="clickArticle(2)">朗读</div>
        <!-- <div class="select-option circle-blue" @click="clickArticle(3)">背诵</div> -->
      </div>
    </div>
  </div>

  <AppLoading v-if="loading.page" />
</template>
<script setup>
import { onMounted, reactive, toRefs, nextTick,ref } from "vue";
import { useRouter,useRoute } from "vue-router";
import { soundmarkChapterdetail, commonQuestions } from "@/api/writtenTest";

import AppHeader from "@/components/AppHeader.vue";
import AppLoading from "@/components/AppLoading.vue";
let  isshowTk=ref(false)
const route = useRoute();
const router = useRouter();
const title = ref('')
let resourceType 
let dataList
const state = reactive({
  loading: {
    page: false,
  },
  dataForm:{},
  testList: [],
  mescrollInstance: null,
  mescrollConfig: {
    down: {
      use: true,
    },
    up: {
      auto: true,
      isBounce: false,
      noMoreSize: 4,
      htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
      callback: (page) => {
        fetchListData(page);
      },
    },
  },
});
onMounted(async ()=>{
  if(route.query.versionId){
    title.value = route.query.title
    await soundmarkChapterdetail({id: route.query.versionId,pid:route.query.productId}).then(res=>{
      state.dataForm = res.data
    })
    sessionStorage.setItem('query',JSON.stringify(route.query))

  }
}) 
const cellClick = (type) => { 
  resourceType = type.resourceType
  commonQuestions({resourceFile:type.gunzipResPath_full}).then(res=>{
    var dataObj = res.data
    if(resourceType === 'a7527f97-14e6-44ef-bf73-3039033f128e' || resourceType === '992a5055-e9d0-453f-ab40-666b4d7030bb'){ //单词跟读、课文句子跟读
      dataObj.source_id = route.query.versionId
      isshowTk.value= true
      sessionStorage.setItem('soundmark',JSON.stringify(dataObj))
    }else{
     if(resourceType === 'c458a8d4-e3ca-403c-b6b2-ae166e955590'){  //测试题
      dataObj.resource.parts.forEach(item=>{
        item.children.forEach(child=>{
          child.answer={
              isAnswer:false,
              sType:'',
              sorceTotal: item.question_ref_sorce /  item.children.length,
              sorce: -1
            }
        })
      })
     }

      sessionStorage.setItem('soundmark',JSON.stringify(dataObj))
      dataList = dataObj
      clickArticle()
    }
    
  })
}
const hiddenTk = () =>{
  isshowTk.value=false
}
const clickArticle = (type)=> {
  // 单词
  if(resourceType === 'a7527f97-14e6-44ef-bf73-3039033f128e'){   //单词跟读
    if(type=== 1) {
      router.push({
        path: "/phoneticSymbol/followRead",
        query: { type: 'follow' },
      }); 
    } else if (type === 2) {
      router.push({
        path: "/phoneticSymbol/followRead",
        query: { type: 'lang' },
      });
    }
  }else if(resourceType === '992a5055-e9d0-453f-ab40-666b4d7030bb'){  //课文句子跟读
    if(type=== 1) {
      router.push({
        path: "/phoneticSymbol/reatic",
        query: { type: 'follow' },
      }); 
    } else if (type === 2) {
      router.push({
        path: "/phoneticSymbol/reatic",
        query: { type: 'lang' },
      });
    }
  }else if(resourceType === 'c458a8d4-e3ca-403c-b6b2-ae166e955590'){  //测试题
    router.push({
      path: "/phoneticSymbol/reat",
      query: {  sid: dataList.resource.parts[0].sid },
    });
  }else if(resourceType === '05a3bf23-b65b-4d7f-956c-5db2b76b9c11'){  //发音要领
    router.push({
      path: "/phoneticSymbol/points",
      query: {  sid: dataList.resource.parts[0].sid },
    });
  }
}
const onClickLeft = () => {
  router.go(-1);
};
const { loading, mescrollConfig,questionPopupShow } = toRefs(state);
</script>
<style scoped lang="scss">
.book-details{
  background: #ffffff;
  height: 100%;
  padding-top: 44px;
  padding-bottom: 20px;
  overflow: scroll;
  .content
  {
    .cell-list{
      .custom-title{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
        margin-bottom: 10px;
      }
      .img{
        margin-right:5px;
        width: 20px;
        height: 20px;
      }
    }
   .tag-blue{
    font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #0287FD;
font-style: normal;
background: url('../../assets/images/tag-blue.png') no-repeat;
background-size: 100% 24px;
  text-align: center;
  display: inline-block;
  padding: 2px 10px;
   }
   .tag-yellow{
    font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #FF9917;
font-style: normal;
background: url('../../assets/images/tag-yellow.png') no-repeat;
background-size: 100% 24px;
  text-align: center;
  display: inline-block;
  padding: 2px 10px;
   }
   .tag-green{
    font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #0CB76C;
font-style: normal;
background: url('../../assets/images/tag-green.png') no-repeat;
background-size: 100% 24px;
  text-align: center;
  display: inline-block;
  padding: 2px 10px;
   }
  }
  .tk-select{
    position: absolute;
    z-index: 2;
    background: rgba(0,0,0,0.75);
    top: 40px;
    bottom: 0;
    left:0;
    right:0;
    .select-box{
      padding-top: 150px;
      padding-left: calc(50% - 50px);
      .select-option{
        width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
            line-height:98px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            text-align: center;
            font-style: normal;
            margin-bottom:60px;
         &.circle-yellow{
            background: #FF9917;
          }
          &.circle-green{
            background: #0CB76C;
          }
          &.circle-blue{
            background: #0287FD;
          }
      }
    }
    
  }
}
</style>
